<template>
  <div>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">在线聊天室</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <div class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="输入你的昵称" v-model="username" class="form-control" />
            </div>
            <button class="btn btn-success" @click="btnLink">连接</button>
            <button class="btn btn-danger" :disabled="disabled" @click="closeBtn">断开</button>
          </div>
        </div>
        <!--/.navbar-collapse -->
      </div>
    </nav>
    <blockquote style="margin-top: 100px;text-align: center;">
      Websocket是一种用于H5浏览器的实时通讯协议，可以做到数据的实时推送，本项目基于Websocket制作。
      <small>
        <cite title="Source Title">在线聊天室</cite>
      </small>
    </blockquote>
    <div style="margin:0 auto;text-align:center;" class="col-xs-12 col-sm-12">
      <div class="row">
        <div
          class="panel panel-default col-xs-12 col-sm-2"
          style="padding-left:0;padding-right:0;margin-right:2rem;height:38rem;"
        >
          <div class="panel-heading">
            <h3 class="panel-title">
              当前在线人数：
              <span>{{online_total}}</span>
            </h3>
          </div>
          <!-- 用户列表 -->
          <div
            class="panel-body"
            id="user_list"
            style="overflow: auto;-webkit-overflow-scrolling: touch;height: 34rem;"
          ></div>
        </div>
        <!-- 内容 -->
        <div class="col-xs-12 col-sm-6 panel panel-success" style="padding-left:0;padding-right:0;">
          <div class="panel-heading">
            <h3 class="panel-title">公共聊天室</h3>
          </div>
          <div
            ref="content"
            class="panel-body"
            style="height: 35rem;overflow: auto;-webkit-overflow-scrolling: touch;"
          >
            <div v-for="(item,i) in listData" :key="i">
              <!-- <div :class="temp.indexOf(username) !== -1 ? 'myself' : (temp.indexOf('系统消息') !== -1 ? 'stystem' : 'friend')">{{item}}</div>
              <div class="clearboth"></div>-->
            </div>
          </div>
        </div>
        <!-- 提交栏 -->
        <div class="col-xs-12 col-sm-12" style="height:5rem;">
          <div class="col-lg-12" style="padding-left: 0;padding-right: 0;padding-bottom:3rem;">
            <div class="input-group">
              <input
                type="text"
                class="form-control input-group-lg"
                style="height:8rem;"
                id="msg_box"
              />
              <span class="input-group-btn">
                <button
                  class="btn btn-default"
                  type="button"
                  style="height: 8rem;width: 9rem;"
                  id="msg_box"
                  @click="send"
                >发送</button>
              </span>
            </div>
            <!-- /input-group -->
          </div>
          <!-- /.col-lg-6 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as ws from "../common/websocket.js";
export default {
  name: "home",
  data() {
    return {
      username: "", //用户名
      online_total: 0, //在线人数
      timeout: 6000, //延时
      wsTimeoutObj: null, //延时器对象
      disabled: true, //默认禁止点击断开
      ws: {}, //websocket实例对象
      listData: [], //存聊天内容
      temp: "" //存data
    };
  },
  mounted() {
    var a = sessionStorage.getItem("connect");
  },
  //返回connectState
  computed: {
    getconnectState() {
      var a = sessionStorage.getItem("connect");
      return a;
    }
  },
  //监听计算属性返回的值
  watch: {
    getconnectState(old, newVal) {
      console.log(old, newVal);
      this.disabled = a;
    }
  },
  methods: {
    btnLink() {
      //初始化定时器对象
      wsTimeoutObj = null;
      if (this.username === "") {
        alert("请输入一个昵称，再点击连接！");
        return false;
      } else {
        let uname = this.username;
        //实例化websocket
        var ws = new WebSocket("ws://127.0.0.1:8888");
        //连接成功的回调onopen
        ws.onopen = function(e) {
          let data = "系统消息：建立连接成功";
          listMsg(data, uname, getUser);
          if (e.currentTarget.readyState == 1) {
            let disabledState = document.getElementById("linkState");
            disabledState.disabled = false;
          }
          //调定时器方法
          startWsTimeOut();
        };
        //连接关闭的回调onclose
        ws.onclose = function(e) {
          let data = "系统消息：已退出聊天室";
          deleteWsTimeOut(); //清除定时器
          listMsg(data, uname, getUser);
          let a = document.getElementById("linkState");
          a.disabled = true;
          var user_num = document.getElementById("user_num"); //获取id为user_num的dom
          user_num.innerHTML = name_list.length;
        };
        //接收服务器返回消息的回调onmessage
        ws.onmessage = function(e) {
          var msg = JSON.parse(e.data); //解析服务器返回的消息赋值给变量msg
          if (msg.type === "pong") {
            resetWsTimeOut();
          }
          var sender, user_name, name_list, change_type; //声明变量 sender(内容前的title)，user_name(拿登录用户名)，name_list(拿用户列表)，change_type(消息类型)
          switch (msg.type) {
            case "system":
              sender = "系统消息: ";
              break;
            case "user":
              sender = msg.from + ": ";
              break;
            case "handshake":
              var user_info = { type: "login", content: uname };
              sendMsg(user_info);
              return;
            case "login":
            case "logout":
              user_name = msg.content;
              name_list = msg.user_list;
              change_type = msg.type;
              dealUser(user_name, change_type, name_list);
              return;
          }

          var data = sender + msg.content; //拼接title和content，例如：'系统消息：xxx上线了'
          listMsg(data, uname, getUser); //传值给listMsg
        };
        //错误的回调onerror
        ws.onerror = function() {
          var data = "系统消息 : 出错了,请退出重试.";
          listMsg(data, uname, getUser);
        };
      }
    },
    //定时器方法
    startWsTimeOut() {
      wsTimeoutObj = setTimeout(function() {
        ws.send('{"type":"heartbeat","content":"ping"}');
      }, this.timeout);
    },
    //重置定时器
    resetWsTimeOut() {
      // 重置计时器
      clearTimeout(wsTimeoutObj); // 清空计时器
      startWsTimeOut();
    },
    //清除定时器
    deleteWsTimeOut() {
      clearTimeout(wsTimeoutObj); // 清空计时器
    },
    //断开连接
    closeBtn() {
      ws.close();
    },

    //监听回车
    confirm(event) {
      var key_num = event.keyCode;
      if (13 == key_num) {
        send();
      } else {
        return false;
      }
    },
    /**
     * 发送并清空消息输入框内的消息
     */
    send() {
      var msg_box = document.getElementById("msg_box");
      var content = msg_box.value;

      var linkState = document.getElementById("linkState");
      if (linkState.disabled) {
        alert("请先连接哦");
      } else if (content == "") {
        alert("不能发送空消息哦");
      } else {
        var reg = new RegExp("\r\n", "g");
        content = content.replace(reg, "");
        var msg = { content: content.trim(), type: "user" };
        sendMsg(msg);
        msg_box.value = "";
        // todo 清除换行符
      }
    },
    /**
     * 将消息内容添加到输出框中,并将滚动条滚动到最下方
     */
    listMsg(data, uname, getUser) {
      var msg_list = document.getElementById("msg_list"); //获取到id为msg_list的dom(聊天内容区域)
      if (data) {
        if (data.indexOf(uname) !== -1) {
          var nowData = data.split(":");
          var newData = nowData[1];
          var msg = document.createElement("div"); //创建div标签
          msg.className = "myself";
          var clear = document.createElement("div");
          clear.className = "clearboth";
          msg.innerHTML = newData; //div标签中添加内容为拼装好的数据
          msg_list.appendChild(msg); //添加带有内容的div标签到内容div的dom节点
          msg_list.appendChild(clear); //添加带有清除浮动的div标签到内容div的dom节点
        } else if (data.indexOf("系统消息") !== -1) {
          var msg = document.createElement("p"); //创建p标签
          msg.innerHTML = data; //p标签中添加内容为拼装好的数据
          msg_list.appendChild(msg); //添加带有内容的p标签到div的dom节点
        } else {
          var msg = document.createElement("div"); //创建div标签
          msg.className = "friend";
          var clear = document.createElement("div");
          clear.className = "clearboth";
          var feiendUsername = data.split(":")[0];
          var feiendContent = data.split(":")[1];
          msg.innerHTML = "【" + feiendUsername + "】说：" + feiendContent; //div标签中添加内容为拼装好的数据
          msg_list.appendChild(msg); //添加带有内容的div标签添加到内容div的dom节点
          msg_list.appendChild(clear); //添加带有清除浮动的div标签到内容div的dom节点
        }
      }
      msg_list.scrollTop = msg_list.scrollHeight; //添加内容后滚动到底部
    },
    /**
     * 处理用户登陆消息
     *
     * @param user_name 用户名
     * @param type  login/logout
     * @param name_list 用户列表
     */
    dealUser(user_name, type, name_list) {
      var user_list = document.getElementById("user_list"); //获取id为user_list的dom
      var user_num = document.getElementById("user_num"); //获取id为user_num的dom
      while (user_list.hasChildNodes()) {
        user_list.removeChild(user_list.firstChild);
      }

      for (var index in name_list) {
        var user = document.createElement("p");
        user.innerHTML = name_list[index];
        user_list.appendChild(user);
      }
      user_num.innerHTML = name_list.length;
      user_list.scrollTop = user_list.scrollHeight;

      var change = type == "login" ? "加入聊天室" : "离开聊天室";
      var time = new Date();
      var nowTime =
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1) +
        "-" +
        time.getDate() +
        " " +
        time.getHours() +
        ":" +
        (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) +
        ":" +
        (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds());
      var data =
        "系统消息" + "(" + nowTime + ")" + "：" + user_name + " 已" + change;
      listMsg(data);
    },
    /**
     * 将数据转为json并发送
     * @param msg
     */
    sendMsg(msg) {
      //websocket的发送方法send(data),data为发送的内容
      var data = JSON.stringify(msg);
      ws.send(data);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@media (min-width: 768px) {
  .col-sm-6 {
    width: 81rem;
  }
  .row {
    width: 100rem;
    margin: 0 auto;
  }
  .stystem {
    padding: 0.2rem;
    background: #eee;
    width: 30rem;
    margin: 0 auto;
    border-radius: 1.2rem;
    margin: 0.5rem auto;
  }
}
@media (max-width: 500px) {
  .stystem {
    padding: 0.2rem;
    background: #eee;
    width: 22rem;
    margin: 0 auto;
    border-radius: 1.2rem;
    margin: 0.5rem auto;
  }
}
.myself {
  float: right;
  background: #cfffcf;
  margin: 1rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
}
.friend {
  float: left;
  background: #ffe6b8;
  margin: 1rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
}
.clearboth {
  color: gray;
  clear: both;
  margin-left: 20px;
  padding-top: 5px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #bbb;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
</style>
